<template>
    <div class="list">
        <ul class="prolist">
        <li class="proItem" v-for="item in  proList" :key="item.proid" @click="$router.push('/detail/'+item.proid)">
            <div class="itemImage">
                <van-image :src="item.img1"></van-image>
            </div>
            <div class="itemInfo">
                <van-text-ellipsis :content="item.proname" rows="2" />
                <div class="price">¥{{ item.originprice }}</div>
                <div class="other">
                    <van-tag type="danger">{{ item.category }}</van-tag>
                </div>
            </div> 
        </li>
    </ul>
    </div>
</template>

<script>
    export default {
        props:['proList'],
        created(){
            console.log(this.proList);
        }
    }
</script>

<style lang="less" scoped>
.list>.prolist {
    display: flex;
    flex-wrap: wrap;
    .proItem {
        width: 46%;
        margin: 8px 2%;
        min-height: 2.6rem;
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;

        .itemImage {
            width: 100%;
            .van-image {
                width: 100%;
                height: 100%;
                display: block;
            }
        }
        .itemInfo {
            padding: 10px;

            .price {
                color: #f66;
                margin-top: 5px;
            }
            .other {
                margin-top: 5px;
            }
        }
    }
}
</style>